{% extends "base.html" %}

{% block content %}
<div class="attributes-container">
    <table>
        <thead>
            <tr>
                <th>采购清单号</th>
                <th>员工编号</th>
                <th>采购数量</th>
                <th>采购总价</th>
                <th>采购时间</th>
                <th>备注</th>
                <th>采购明细号</th>
                <th>商品编号</th>
                <th>采购数量</th>
                <th>商品单价</th>
                <th>商品总价</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody id="purchase-table-body">
        </tbody>
    </table>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        fetch('/api/purchases')
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('purchase-table-body');
                tableBody.innerHTML = '';
                data.forEach(purchase => {
                    const details = purchase.details;
                    if (details.length === 0) {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${purchase['采购清单号']}</td>
                            <td>${purchase['员工编号']}</td>
                            <td>${purchase['采购数量']}</td>
                            <td>${purchase['采购总价']}</td>
                            <td>${purchase['采购时间']}</td>
                            <td>${purchase['备注']}</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        `;
                        tableBody.appendChild(row);
                    } else {
                        details.forEach((detail, index) => {
                            const row = document.createElement('tr');
                            row.innerHTML = `
                                ${index === 0 ? `
                                <td>${purchase['采购清单号']}</td>
                                <td>${purchase['员工编号']}</td>
                                <td>${purchase['采购数量']}</td>
                                <td>${purchase['采购总价']}</td>
                                <td>${purchase['采购时间']}</td>
                                <td>${purchase['备注']}</td>
                                ` : `
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                `}
                                <td>${detail['采购明细号']}</td>
                                <td>${detail['商品编号']}</td>
                                <td>${detail['采购数量']}</td>
                                <td>${detail['商品单价']}</td>
                                <td>${detail['商品总价']}</td>
                                <td>${detail['备注']}</td>
                            `;
                            tableBody.appendChild(row);
                        });
                    }
                });
            }).catch(error => {
                console.error('Error:', error);
            });
    });
</script>
{% endblock %}
